<template>
  <div id="highLight" v-if="highlightShow.showSwitch" @click="highLight">
    <img v-if="!highlightShow.showHighLight" alt="" class="highLight-svg" src="@/assets/svg/highLightOff.svg">
    <img v-if="highlightShow.showHighLight" alt="" class="highLight-svg" src="@/assets/svg/highLightOn.svg">
  </div>
</template>

<script>
export default {
  name: "HighLight",
  props: ["highlightShow"],
  methods: {
    highLight() {
      this.highlightShow.showHighLight = !this.highlightShow.showHighLight;
      if (this.highlightShow.showHighLight){
        this.$emit('highlight');
      }else {
        this.$emit('cancelHighlight');
      }
    }
  }
}
</script>

<style scoped>
#highLight {
  width: 50px;
  height: 50px;
  border-radius: 15px;
  background-color: rgba(79, 79, 79, 0.14);

  z-index: 150;
  position: fixed;
  bottom: 40px;
  right: 80px;
  /*left: 1300px;*/

  cursor: pointer;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

#highLight:hover {
  background-color: rgba(79, 79, 79, 0.34);
}

.highLight-svg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>